<template>


  
  <el-aside width="200px" class="aside">
    <div class="aside-list">
      <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
      @close="handleClose">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :value="false" v-show="isCollapse">|||</el-radio-button>
        <el-radio-button :value="true" v-show="!isCollapse">|||</el-radio-button>
      </el-radio-group>


      <!-- 循环遍历数据 -->
      <el-menu-item index="v.id" v-for="v in asidelist" :key="v.id">
        <!-- elementuiplus自己的图标 -->
        <!-- <el-icon>
          <component :is="v.icon"></component>
        </el-icon> -->


        <!-- 阿里巴巴图标 -->
        <i class="iconfont" :class="v.icon"></i>
        <template #title>{{ v.title }}</template>
      </el-menu-item>




    </el-menu>

</div>
    

  </el-aside>

</template>




<script setup lang="ts">
import { ref } from 'vue'
// 图标引入
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Pear,
  Printer,
  Football,
  Brush,
  Medal

} from '@element-plus/icons-vue'


const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}




// 定义左侧数据
// let asidelist = ref([
//   { id: 1, title: '酒店', icon: Document },
//   { id: 2, title: '飞机票', icon: Setting },
//   { id: 3, title: '火车票', icon: Location },
//   { id: 4, title: '汽车票', icon: Pear },
//   { id: 5, title: '旅游', icon: Printer },
//   { id: 6, title: '景点', icon: Football },
//   { id: 7, title: '船票', icon: Brush },
//   { id: 8, title: '门票', icon: Medal },
// ])


// 定义左侧数据,动态加载第三方图标
let asidelist = ref([
  { id: 1, title: '酒店', icon: 'icon-jiudian' },
  { id: 2, title: '飞机票', icon: 'icon-feiji' },
  { id: 5, title: '旅游', icon: 'icon-lvyouye' },
  { id: 6, title: '景点', icon: 'icon-jingdian' },
  { id: 7, title: '船票', icon: 'icon-lunchuan' },
  { id: 8, title: '门票', icon: 'icon-menpiao' },

])








</script>



<style scoped></style>